<template>
  <form class="search-input" @submit.prevent="submitHandler">
    <label>
      <input type="text" :placeholder="placeholder" v-model="query" @focusout="submitHandler">
      <van-icon name="search" :color="color" />
    </label>
  </form>
</template>

<script>
import { Icon } from 'vant'

export default {
  name: 'SearchInput',
  components: { [Icon.name]: Icon },
  props: {
    placeholder: {
      type: String,
      default: '请输入感兴趣的职位或企业名称'
    },
    color: {
      type: String,
      default: '#2e4bfc'
    }
  },
  data () {
    return {
      query: ''
    }
  },
  methods: {
    submitHandler () {
      this.$emit('submit', this.query)
    }
  }
}
</script>

<style scoped lang="less">
.search-input {
  padding: 20px 30px;
  border-radius: 10px;

  label {
    display: flex;
    align-items: center;
    background-color: #ffffff;

    input {
      font-size: 26px;
      flex: 1;
      border: none;
      padding: 0 20px;
      height: 76px;
    }

    .van-icon {
      margin-right: 20px;
      font-size: 40px;
      font-weight: bold;
    }
  }
}
</style>
